<style>
/*订单显示*/
.item{ width:125px; height:180px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
.item .tags{width:20px;float:left;text-align:center;}
.item .pic{width:80px; float:left;margin-left:0px;text-align:center;}
.item .pic img{max-width:80px; max-height:80px;border-radius:5px;}
.process{font-weight:bold;font-size:16px;float:right;margin-right:8px;margin-top:6px;}
.item .text{text-align:center;}
.clear{clear:both;}
</style>
<form class="layui-form" action="{:url('backOrderAssign')}" method="post">
<div class="layui-row">
    <div class="layui-col-md6">
    	<button type="button" href="{:url('setting')}" class="layui-btn layui-btn-primary layui-btn-sm hisi-iframe" hisi-data="{width: '60%', height: '80%'}" title="工厂新单分配比例设置"><i class="layui-icon layui-icon-set"></i>工厂分配比例设置</button>
    	<button type="button" href="" class="layui-btn layui-btn-primary layui-btn-sm hisi-iframe" title="订单分配趋势图" style="display:none"><i class="layui-icon layui-icon-chart"></i>订单分配趋势图</button>
        <button type="button" href="{:url('backOrder')}?action=showCharts" title="订单分配趋势图" class="layui-btn layui-btn-sm hisi-iframe" hisi-data="{width: '90%', height: '90%'}">
        <i class="layui-icon layui-icon-chart"></i>订单分配趋势图</button> &nbsp;&nbsp;
    </div>
    <div class="layui-col-md6" style="text-align:right">
    
    <button type="submit" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="formSubmit" hisi-data="{pop: false, refresh: false, callback:getOrders}"><i class="layui-icon layui-icon-release"></i>一键分配</button></div>
</div>

<div id="view" class="mt10">
</div>
</form>

<script id="tpl" type="text/html">
<div class="layui-collapse">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title"><strong>系统分配(按比例已经匹配好的订单)：</strong><span class="red">{{ d.order_count }}</span> 单 - <span class="red">{{ d.quantity }}</span> 件
		 </h2>
		<div class="layui-colla-content layui-show">
				
			{{#  layui.each(d.setlist, function(kkk, vvv){ }}
				<div class="item layui-anim layui-anim-scaleSpring">
					<div class="tags">{{ vvv.tags }}</div>
					<div class="pic"><img src="{{ vvv.pic }}" class="lay-pic"></div>
					<div class="process" id="status_txt{{vvv.client_ordernum}}"  onmouseover="showDiv('status_txt{{vvv.client_ordernum}}', '加工费：{{vvv.cost}}<br>
					加工费小计：{{vvv.cost_little}}')">{{vvv.complexity_str}}</div>
					<div class="text">
						<span class="copy-item">{{ vvv.client_ordernum }}</span><br>
						{{ vvv.quantity }}件<br>
						{{ layui.util.toDateString(vvv.shipment_time*1000, 'yyyy-MM-dd') }}<br>
						<select name="factory_id[{{ vvv.id }}]" style="width:110px;height:24px;border:1px solid #ccc;" lay-ignore>
								{{#  layui.each(d.factoryKV, function(fk, fv){ }}
								<option value="{{ fk }}" {{# if(vvv.factory_id == fk){ }}selected{{# } }}>{{ fv }}</option>
								{{#  }); }}
						</select>
						
					</div>
				</div>
			{{#  }); }}

			<div class="clear"></div>
		</div>
	</div>
	<!--系统分配之后 剩余的订单-->
	<div class="layui-colla-item">
		<h2 class="layui-colla-title"><strong>手工分配(系统分配之后剩余的订单)：</strong><span class="red">{{ d.people_assign_count }}</span> 单 - <span class="red">{{ d.people_quantity }}</span> 件
		</h2>
		<div class="layui-colla-content layui-show">
			{{#  layui.each(d.peopleAssign, function(kkk, vvv){ }}
				<div class="item layui-anim layui-anim-scaleSpring">
					<div class="tags">{{ vvv.tags }}</div>
					<div class="pic"><img src="{{ vvv.pic }}" class="lay-pic"></div>
					<div class="process" id="status_txt{{vvv.client_ordernum}}"  onmouseover="showDiv('status_txt{{vvv.client_ordernum}}', '加工费：{{vvv.cost}}<br>
					加工费小计：{{vvv.cost_little}}')">{{vvv.complexity_str}}</div>
					<div class="text">
						<span class="copy-item">{{ vvv.client_ordernum }}</span><br>
						{{ vvv.quantity }}件<br>
						{{ layui.util.toDateString(vvv.shipment_time*1000, 'yyyy-MM-dd') }}<br>
						<select name="factory_id[{{ vvv.id }}]" style="width:110px;height:24px;border:1px solid #ccc;" lay-ignore>
								{{#  layui.each(d.factoryKV, function(fk, fv){ }}
								<option value="{{ fk }}" {{# if(vvv.factory_id == fk){ }}selected{{# } }}>{{ fv }}</option>
								{{#  }); }}
						</select>
						
					</div>
				</div>
			{{#  }); }}
			<div class="clear"></div>
		</div>
	</div>
</div>
</script>
<div id="defectiveTpl" class="hide">
	<form class="layui-form layui-form-pane" lay-verify="" action="" method="get">
    
	<div class="layui-form-item pt20 pl20 detailcontent" id="detailcontent" style="width:1000px;height:300px">
	</div>
    <div class="layui-form-item pt20 pl20" id="historyAssign" style="width:1000px;height:200px"></div>
	</form>
</div>
{include file="system@block/layui" /}
<script src="__PUBLIC_JS__/Highcharts@9.3.2/code/highcharts.js"></script>

<script>
	var retData='';
	layui.use([ 'element', 'form', 'layer', 'laytpl', 'tool'], function() {
		var element = layui.element;
		var layer = layui.layer;
		var $ = layui.jquery;
		var form = layui.form;
		var laytpl = layui.laytpl;
		
		function showchart(res) {
			res.data.minguifang_3.tooltip.pointFormatter=function() {
				return '<span style="color: '+ this.series.color + '">\u25CF</span> '+
					this.series.name+': <b>'+ this.y +'</b>'
			};
			res.data.all_3.tooltip.pointFormatter=function() {
				return '<span style="color: '+ this.series.color + '">\u25CF</span> '+
					this.series.name+': <b>'+ this.y +'</b>'
			};
			var chart_minguifang_3 = Highcharts.chart('minguifang_3', res.data.minguifang_3);
			var chart_all_3 = Highcharts.chart('all_3', res.data.all_3);
		}
		
     	// 获取订单
		window.getOrders = function(){
			$.ajax({
			   type: "POST",
			   url: "{:url('')}",
			   data: "",
			   dataType:"json",
			   success: function(res){
				   if (res.data.list.length > 0) {
					   var Tpl = $('#tpl').html();
					   retData=res.data;
					   laytpl(Tpl).render(res.data, function(html){
					   		$('#view').html(html);
							//$(".detailcontent").html(res.data.retstr);
								var chart = Highcharts.chart('detailcontent', {
								chart: {
									type: 'column'
								},
								title: {
									text: retData.today+'新单分配占比情况'
								},
								xAxis: {
									categories: retData.factoryNameArr
								},
								yAxis: {
									min: 0,
									title: {
										text: '订单个数'
									},
									stackLabels: {  // 堆叠数据标签
										enabled: true,
										style: {
											fontWeight: 'bold',
											color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
										}
									}
								},
								legend: {
									align: 'right',
									x: -30,
									verticalAlign: 'top',
									y: 25,
									floating: true,
									backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
									borderColor: '#CCC',
									borderWidth: 1,
									shadow: false
								},
								tooltip: {
									formatter: function () {
										return '<b>' + this.x + '</b><br/>' +
											this.series.name + ': ' + this.y + '<br/>' +
											'总量: ' + this.point.stackTotal;
									}
								},
								plotOptions: {
									column: {
										stacking: 'normal',
										dataLabels: {
											enabled: true,
											color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
											style: {
												// 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
												textOutline: '1px 1px black'
											}
										}
									}
								},
								series: [{
									name: '简',
									data: retData.chartCompArr[0]
								}, {
									name: '易',
									data: retData.chartCompArr[1]
								}, {
									name: '难',
									data: retData.chartCompArr[2]
								}]
							});
							//---------enc chart
					   });
					   //history assign charts
				   } else {
					   $('#view').html('<div align="center" style="height:200px;">暂无新订单数据</div>');
				   }
				   
				   form.render();
				   element.init();
			   }
			});
		}
		getOrders();
        window.showDiv = function(id, msg) {
            tip_index_show=layer.tips("<span>"+msg+"</span>",
                "#"+id+"",
                {tips:[1, '#4794ec']});
            $("#"+id+"").mouseleave(function(){
                layer.close(tip_index_show);
            });
        }
		
		// 工价调整
		var layerDefective = null;
		$(document).on('click','.show_avgdetail',function(e){
			var orderId = $(this).attr('data-id');
			var url = $(this).attr('data-url');
			var json = $(this).attr('data-json');
			var ordernum=$(this).attr("ordernum");
			var d = [];
			d['list'] = eval("(" + json+ ")");
			d['url'] = url;
			d['order_id'] = orderId;
			var content = laytpl($('#defectiveTpl').html()).render(d);
			layerDefective = layer.open({
				type: 1
				,shade: 0
				,offset: '100px'
				,area: ['1140px','600px']
				,anim: parseInt(Math.random()*(6+1),10)
				,skin:'layui-layer-molv'
				,title:'订单分配结果 '
				,content: content
			});
		});
		$(document).on('click','.layui-colla-title',function(e){
			return;
		});
		
	});
</script>